<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_title">我的</view>
			<image class="top_img" src="/static/29.png" mode=""></image>

			<view class="info" v-if="avatar && nickname && phone">
				<image class="info_left" :src="avatar" mode=""></image>
				<view class="info_right">
					<view class="info_right_top">
						<view class="info_right_top_left">{{ nickname }}</view>
						<view class="info_right_top_right">
							<button open-type="contact" class="info_right_top_right_button">
								<image class="info_right_top_right_img" src="/static/15.png" mode=""></image>
							</button>

							<image class="info_right_top_right_img" src="/static/16.png" mode="" @click="to_login(2)"></image>
						</view>
					</view>
					<view class="info_right_btn">
						<image class="info_right_btn_img" src="/static/14.png" mode=""></image>
						{{ phone }}
					</view>
				</view>
			</view>

			<view class="info" v-else @click="to_login(1)">
				<image class="info_left" src="/static/user.png" mode=""></image>
				<view class="info_right info_right_text">授权登录</view>
			</view>
			<!-- 房东申请 -->
			<image class="top_zw" src="/static/13.png" mode="" @click="to_landlord"></image>
		</view>

		<view class="con">
			<view class="nav">
				<view class="nav_nr" @click="to_order(10)">
					<image class="nav_nr_img" src="/static/17.png" mode=""></image>
					<view class="nav_nr_title">全部订单</view>
				</view>
				<view class="nav_nr" @click="to_order(5)">
					<image class="nav_nr_img" src="/static/18.png" mode=""></image>
					<view class="nav_nr_title">待支付</view>
				</view>
				<view class="nav_nr" @click="to_order(1)">
					<image class="nav_nr_img" src="/static/19.png" mode=""></image>
					<view class="nav_nr_title">进行中</view>
				</view>
				<view class="nav_nr" @click="to_order(3)">
					<image class="nav_nr_img" src="/static/20.png" mode=""></image>
					<view class="nav_nr_title">已完成</view>
				</view>
			</view>

			<view class="box">
				<view class="list" @click="to(1)">
					<view class="list_left">
						<image class="list_img" src="/static/21.png" mode=""></image>
						<view class="list_title">优惠券</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
				<view class="list" @click="to(2)">
					<view class="list_left">
						<image class="list_img" src="/static/22.png" mode=""></image>
						<view class="list_title">我的收藏</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
				<view class="list" @click="to(3)">
					<view class="list_left">
						<image class="list_img" src="/static/23.png" mode=""></image>
						<view class="list_title">住客信息</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
				<view class="list" @click="to(4)">
					<view class="list_left">
						<image class="list_img" src="/static/24.png" mode=""></image>
						<view class="list_title">联系客服</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
				<view class="list" @click="to(5)">
					<view class="list_left">
						<image class="list_img" src="/static/25.png" mode=""></image>
						<view class="list_title">用户协议</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
				<view class="list" @click="to(6)">
					<view class="list_left">
						<image class="list_img" src="/static/26.png" mode=""></image>
						<view class="list_title">隐私协议</view>
					</view>
					<image class="list_right" src="/static/28.png" mode=""></image>
				</view>
			</view>
			<button open-type="contact" class="text">
				<image class="text_img" src="/static/27.png" mode=""></image>
				其他疑问，联系客服
			</button>
		</view>
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="popup_box">
				<image class="popup_box_img" src="/static/73.png" mode=""></image>
				<view class="popup_box_nr">
					<view class="popup_box_nr_title">专属客服</view>
					<view class="popup_box_nr_text">扫码添加您的专属客服</view>
					<image class="popup_box_nr_img" :src="kf_photo" mode=""></image>
					<view class="popup_box_nr_btn">
						<view class="popup_box_nr_btn_nr" @click="callPhone">客服热线</view>
						<button class="popup_box_nr_btn_nr" open-type="contact">在线联系</button>
					</view>
				</view>
				<image class="popup_box_X" src="/static/74.png" mode="" @click="close"></image>
			</view>
		</uni-popup>
		<TabBar :type="1" :index="5"></TabBar>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let page = ref(1)
	let list = ref([])
	let sift_id = ref(1)
	let nav = ref(1)
	let popup = ref(null)
	let nickname = ref(null)
	let avatar = ref(null)
	let phone = ref(null)
	let kf_phone = ref(null)
	let kf_photo = ref(null)
	let type = ref(0)
	let status = ref(0)
	let liyou = ref(null)

	const open = () => {
		popup.value.open()
	}
	const close = (e) => {
		popup.value.close()
	}
	const callPhone = (e) => {
		popup.value.close()
		uni.makePhoneCall({
			phoneNumber: kf_phone.value
		})
	}

	const navclick = (id) => {
		nav.value = id
	}
	const siftclick = (id) => {
		sift_id.value = id
	}

	const to = (value) => {
		switch (value) {
			case 1:
				console.log('优惠券')
				uni.navigateTo({
					url: '/pages_A/coupon/coupon?type=1'
				})
				break
			case 2:
				console.log('我的收藏')
				uni.navigateTo({
					url: '/pages_A/collection/collection'
				})
				break
			case 3:
				console.log('住客信息')
				uni.navigateTo({
					url: '/pages_A/guest/guest?type=1'
				})
				break
			case 4:
				console.log('客服')
				open()
				break
			case 5:
				console.log('用户协议')
				uni.navigateTo({
					url: '/pages_A/text/text?type=1'
				})
				break
			case 6:
				console.log('隐私协议')
				uni.navigateTo({
					url: '/pages_A/text/text?type=2'
				})
				break
			default:
				break
		}
	}
	const no_login = () => {
		console.log('退出登录')
	}

	onShow(() => {
		console.log('页面刷新')
		let is_phone = uni.getStorageSync('phone') || ''
		if (!is_phone) {
			return
		}
		http.post('/srapi/wode/wode').then((res) => {
			// 返回值
			console.log(res.data)
			nickname.value = res.data.nickname
			avatar.value = res.data.avatar
			phone.value = res.data.phones
			type.value = res.data.type
			status.value = res.data.status
			liyou.value = res.data.liyou
		})
	})

	onLoad((option) => {
		console.log('接收传参:', option)
		http.noAuthpost('/srapi/wode/xieyi').then((res) => {
			kf_phone.value = res.data.phone
			kf_photo.value = res.data.photo
		})
	})
	onShareAppMessage((res) => {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			path: 'pages/index/index'
		}
	})
	const to_order = (id) => {
		uni.navigateTo({
			url: '/pages_A/order/order?type=' + id
		})
	}

	const to_login = (type) => {
		uni.navigateTo({
			url: '/pages/login/login?type=' + type
		})
	}
	const to_landlord = () => {
		if (type.value == 1) {
			uni.navigateTo({
				url: '/pages_B/landlord/landlord'
			})
		} else {
			if (status.value == 0) {
				uni.navigateTo({
					url: '/pages_B/occupancy/occupancy'
				})
			} else {
				uni.navigateTo({
					url: '/pages_B/audit/audit?status=' + status.value + '&liyou=' + liyou.value
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.top {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.top_title {
			height: 60rpx;
			position: relative;
			z-index: 9;

			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.top_img {
			width: 750rpx;
			height: 520rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.info {
			padding: 20rpx 0;
			position: relative;
			z-index: 9;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_left {
				width: 102rpx;
				height: 102rpx;
				border: 2rpx solid #ffffff;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.info_right_text {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
			.info_right {
				flex: 1;
				.info_right_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 23rpx;
					.info_right_top_left {
						font-size: 36rpx;
						font-weight: 700;
						color: #000000;
						display: flex;
						align-items: center;
						.info_right_top_left_img {
							width: 90rpx;
							height: 38rpx;
							margin-left: 10rpx;
						}
					}
					.info_right_top_right {
						display: flex;
						align-items: center !important;
						.info_right_top_right_img {
							width: 37rpx;
							height: 36rpx;
							margin-left: 30rpx;
						}
						.info_right_top_right_button {
							padding-top: 10rpx;
						}
					}
				}
				.info_right_btn {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					.info_right_btn_img {
						width: 25rpx;
						height: 28rpx;
					}
				}
			}
		}

		.top_zw {
			position: relative;
			z-index: 9;
			width: 690rpx;
			height: 124rpx;
		}
	}

	.con {
		position: relative;
		z-index: 9;
		padding: 0 30rpx;
		.box {
			padding: 0 30rpx;
			background: #ffffff;
			border-radius: 24rpx;
			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list_left {
					flex: 1;
					padding: 30rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 1px solid #f4f5f9;
					.list_img {
						width: 39rpx;
						height: 38rpx;
						margin-right: 30rpx;
					}
					.list_title {
						font-size: 30rpx;
						font-weight: 500;
						color: #000000;
					}
				}
				.list_right {
					width: 10rpx;
					height: 18rpx;
				}
			}
		}
	}

	.nav {
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nav_nr {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.nav_nr_img {
				width: 120rpx;
				height: 120rpx;
			}
			.nav_nr_title {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.text {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		padding-top: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #949494;
		.text_img {
			width: 27rpx;
			height: 26rpx;
			margin-right: 12rpx;
		}
	}

	.popup_box {
		margin-top: -150rpx;
		width: 580rpx;
		height: 842rpx;
		position: relative;
		.popup_box_img {
			position: absolute;
			width: 580rpx;
			height: 842rpx;
			z-index: -1;
		}
		.popup_box_nr {
			width: 580rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.popup_box_nr_title {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 14rpx;
			}
			.popup_box_nr_text {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
				margin-bottom: 18rpx;
			}
			.popup_box_nr_img {
				width: 280rpx;
				height: 280rpx;
				padding: 20rpx;
				background: #ffffff;
				border: 1rpx solid #d0d0d0;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
			}
			.popup_box_nr_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				.popup_box_nr_btn_nr {
					margin: 0 15rpx;
					width: 171rpx;
					height: 72rpx;
					background: #2468fb;
					border-radius: 36rpx;

					font-size: 24rpx;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					line-height: 72rpx;
				}
			}
		}

		.popup_box_X {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	//
</style>
